<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 
        animation  逐帧动画(关键帧动画)
        实现的核心   @keyframes


        过渡动画和逐帧动画的区别
            相同点  动画的时间，延迟时间，速度曲线....
            区别
                过渡动画需要触发条件   hover           简单的动画效果
                逐帧动画不需要触发条件                 复杂的动画，多帧组成

        
        animation:name time delay  infinite alternate forwards   简写
        
     -->
    
</body>
</html>